<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <!-- 这段代码是移动端网页中用于开启理想视口的,理想视口开启之后,修改布局视口的宽度 -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <!-- width: 这个属性就是用来设置布局视口宽度
      取值: 1. 数字(写多少布局视口就是多少.注意,不常用有兼容性问题) 2. device-width(将设备独立像素的宽度设置为布局视口的宽度)
    -->
    <!-- <meta name="viewport" content="width=375" /> -->
    <!-- initial-scale 也是用来修改布局视口的 
    scale = 设备独立像素宽度  /  布局视口宽度。
    -->
    <meta name="viewport" content="initial-scale=1" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        /* width: 345px;
        height: 150px;
        margin: 15px;
        background-color: skyblue; */
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box" id="box"></div>

    <script>
      box.innerText = document.documentElement.clientWidth
    </script>
  </body>
</html>
